<template>
	<view class="">


		<view class="from">

			<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
				<uni-forms-item label="身份申请" required :labelWidth='100'>
					<uni-data-checkbox v-model="baseFormData.gid" :localdata="sexs" />
				</uni-forms-item>

				<uni-forms-item label="姓名" required name="name" :labelWidth='100'>
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="手机号" required name="contactNumber" :labelWidth='100'>
					<uni-easyinput v-model="baseFormData.contactNumber" placeholder="请输入手机号" />
				</uni-forms-item>

				<template v-if="baseFormData.gid==4">
					<uni-forms-item label="原家庭住址" required name="famliyAddress" :labelWidth='100'>
						<uni-easyinput v-model="baseFormData.famliyAddress" placeholder="请输入原家庭住址" />
					</uni-forms-item>
					<uni-forms-item label="与户主关系" required name="relation" :labelWidth='100'>
						<uni-easyinput v-model="baseFormData.relation" placeholder="请输入与户主关系" />
					</uni-forms-item>
				</template>
				<view class="idCard">
					<view class="idCard-des">
						身份证照片（正面）
					</view>
					<view class="idCard-img" @tap='uploadpic'>
						<image v-if="idCard" :src="idCard" mode="aspectFit"></image>
						<image v-else style="width: 80rpx;height: 80rpx;" src="../../../static/com/icon_sctp.png"
							mode=""></image>
						<text style="margin-top: 20rpx;">点击上传图片</text>

					</view>
				</view>

			</uni-forms>
			<view class="submit">
				<view class="submit-btn" @click="submit('baseForm')">
					提交申请
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		sevaImg,
		getApplyMemberApply
	} from '@/api/togeterRich/index.js'
	export default {
		data() {
			return {
				idCard: "",
				baseFormData: {
					name: '',
					contactNumber: '',
					introduction: '',
					gid: 3,
					famliyAddress: '',
					relation: '',
					frontImage: ''
				},
				sexs: [{
					text: '原乡人',
					value: 3
				}, {
					text: '归乡人',
					value: 4
				}],
				rules: {
					famliyAddress: {
						rules: [{
							required: true,
							errorMessage: '原住址不能为空'
						}]
					},
					relation: {
						rules: [{
							required: true,
							errorMessage: '与户主关系不能为空'
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					contactNumber: {
						rules: [{
								required: true,
								errorMessage: '手机号不能为空'
							},
							// {
							// 	validateFunction: function(rule, value, data, callback) {
							// 		console.log(rule, value, data, callback,'rule, value, data, callback')
							// 		console.log(value,'dddddddddd')
							// 		let reg =/^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[1457]|19[0-9]|16[0-9])[0-9]{8}$/;
							// 		if (!reg.test(value)) {
							// 			callback('请输入正确的手机号')
							// 		}
							// 		return true
							// 	}
							// }

						]
					},

				},
			}
		},
		methods: {

			modu(tit, content, confirmText, cancelText) {
				console.log("jinlailem", tit, content, confirmText, cancelText)
				// uni.showModal({
				// 	title: tit,
				// 	content: content,
				// 	showCancel: false,
				// 	cancelText: '',
				// 	confirmText: confirmText,
				// 	success: res => {},
				// 	fail: () => {},
				// 	complete: () => {}
				// });
				uni.showModal({
					title: tit,
					content: content,
					showCancel: false,
					cancelText: cancelText,
					confirmText: confirmText,
					success: res => {
						if (res.confirm) {
							if (confirmText == '知道了') {
								uni.navigateBack({
									delta: 1, //返回层数，2则上上页
								})
							}
						}

						console.log("成功了")
					},
					fail: () => {},
					complete: () => {}
				});
			},
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'user/upload/image',
					name: 'multipart',
					model: "maintain",
					pid: 0
				}, function(res) {
					that.baseFormData.frontImage = res.data.url;
					that.idCard = res.data.url;
				});
			},

			submit(ref) {
				let that = this
				if (this.idCard == '') {
					uni.showToast({
						title: "请上传身份证照片",
						icon: "none",
						duration: 2000
					})
					return;
				}
				this.$refs[ref].validate().then(res => {
					getApplyMemberApply(this.baseFormData).then(ress => {
						that.modu("身份申请已提交", "请耐心等待审核结果", "知道了", '')
					}).catch(err => {
						that.modu("审核失败", "失败原因:管理后台填写的拒绝原因", "重新申请", '')
						console.log('err', err);
					})

				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.idCard {
		height: 490rpx;
		background: #fff;
		margin-top: 20rpx;

		.idCard-des {
			text-align: center;
			font-style: 28rpx;
			color: #333;
		}

		.idCard-img {
			margin: 20rpx auto;
			height: 400rpx;
			text-align: center;
			display: flex;
			justify-content: space-around;
			flex-direction: column;
			align-items: center;

			image {
				width: 100%;
				height: 400rpx;
			}
		}
	}

	.submit {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		padding: 30rpx;

		.submit-btn {
			width: 80%;
			margin: 0 auto;
			background: $maincolor;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			border-radius: 100rpx;
		}
	}

	.from {
		background: #fff;
		width: 100%;
		padding: 30rpx;
		margin: 0 auto;
	}
</style>